<template>
  <div class="grid gap-4 md:grid-cols-3">
    <BaseCard shape="straight" elevated-hover class="p-6">
      <BaseHeading
        tag="h4"
        size="sm"
        weight="semibold"
        lead="tight"
        class="text-muted-800 mb-2 dark:text-white"
      >
        Iam a card
      </BaseHeading>

      <BaseParagraph size="sm" lead="tight" class="text-muted-400">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
      </BaseParagraph>
    </BaseCard>

    <BaseCard shape="rounded" elevated-hover class="p-6">
      <BaseHeading
        tag="h4"
        size="sm"
        weight="semibold"
        lead="tight"
        class="text-muted-800 mb-2 dark:text-white"
      >
        Iam a card
      </BaseHeading>

      <BaseParagraph size="sm" lead="tight" class="text-muted-400">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
      </BaseParagraph>
    </BaseCard>

    <BaseCard shape="curved" elevated-hover class="p-6">
      <BaseHeading
        tag="h4"
        size="sm"
        weight="semibold"
        lead="tight"
        class="text-muted-800 mb-2 dark:text-white"
      >
        Iam a card
      </BaseHeading>

      <BaseParagraph size="sm" lead="tight" class="text-muted-400">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
      </BaseParagraph>
    </BaseCard>
  </div>
</template>
